<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/layui/layui.js"></script>
    <link rel="stylesheet"  href="../static/layui/css/layui.css">
    <script src="../static/js/jquery-3.2.1.min.js"></script>
</head>
<body>

    <ul class="layui-nav top_menu">
        <li class="layui-nav-item lockcms">
            <a href="javascript:;"><i class="iconfont icon-lock1"></i><cite>锁屏</cite></a>
        </li>
    </ul>


    <!-- 锁屏 -->
    <div class="admin-header-lock" id="lock-box" style="display: none;">
        <div class="admin-header-lock-img"><img src=""/></div>
        <div class="admin-header-lock-name" id="lockUserName">颜杰</div>
        <div class="input_btn">
            <input type="password" class="admin-header-lock-input layui-input" placeholder="请输入密码解锁.." name="lockPwd" id="lockPwd" />
            <button class="layui-btn" id="unlock">解锁</button>
        </div>
        <p>请输入“123456”，否则不会解锁成功哦！！！</p>
    </div>




<script>
  layui.use('layer',function () {
        var layer = layui.layer;
      //锁屏
      function lockPage(){
          layer.open({
              title : false,
              type : 1,
              content : $("#lock-box"),
              closeBtn : 0,
              shade : 0.9
          })
      }
      // localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

      // sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

      // 提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。
      $(".lockcms").on("click",function(){
          window.sessionStorage.setItem("lockcms",true);
          lockPage();
      })
      // 判断是否显示锁屏
      if(window.sessionStorage.getItem("lockcms") == "true"){
          lockPage();
      }
      // 解锁
      $("#unlock").on("click",function(){
          if($(this).siblings(".admin-header-lock-input").val() == ''){
              layer.msg("请输入解锁密码！");
          }else{
              if($(this).siblings(".admin-header-lock-input").val() == "123456"){
                  window.sessionStorage.setItem("lockcms",false);
                  $(this).siblings(".admin-header-lock-input").val('');
                  layer.closeAll("page");
              }else{
                  layer.msg("密码错误，请重新输入！");
              }
          }
      });
      $(document).on('keydown', function() {
          if(event.keyCode == 13) {
              $("#unlock").click();
          }
      });
  });
</script>



</body>
</html>